<template>
	<view class="findMessage">
		<uni-tabchange :tabArr="tabArr" :isFixed="true" :activeTab="activeTab" @tabChangeSuccess="tabChangeSuccess"></uni-tabchange>
		<view class="findBox">
			<view class="findOne" v-for="(item,index) in listData" :key="index" @click.stop="toHomePage(item)">
				<view class="flex alignStretch queHeader">
					<view class="avatar">
						<image :src="item.triggerUserAvatar || 'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'" mode="widthFix"></image>
					</view>
					<view class="con">
						<view class="font14 bold">{{item.triggerUserName}}</view>
						<view class="font12 flex alignCenter">
							<view class="">
								<text class="color999 time">{{item.createTime}}</text>
							</view>
						</view>
						<view class="color999 font14 operWord" v-if="activeTab==0">接力了你的找人</view>
						<view class="color999 font14 operWord" v-if="activeTab==1">委托你找人</view>
						<view class="color999 font14 operWord" v-if="activeTab==2">接力了你的接力</view>
						<view class="color999 font14 operWord" v-if="activeTab==3 && item.unveiledType==2">确认了你就是他要找的人</view>
						<view class="color999 font14 operWord" v-if="activeTab==3 && item.unveiledType==1">确认了你不是他要找的人</view>
						<view class="color999 font14 operWord" v-if="activeTab==3 && item.foundType==2">揭榜了你的找人</view>
						<view class="hiddenOneline quesTitle color666 font14" @click.stop="toFindDetail(item)">{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>
		<uni-nodata v-if="listData.length==0" :iconStyle="{'margin':'100rpx 0 0'}"></uni-nodata>
	</view>
</template>

<script>
	import { messFindList,messFindReadOper,messFindUnreadNum } from "@/api/mine.js"
	export default {
		data() {
			return {
				activeTab:0,
				tabArr:[{
					title:'我找人',
					num:0
				},{
					title:'委托我',
					num:0
				},{
					title:'我接力',
					num:0
				},{
					title:'我揭榜',
					num:0
				}],
				page:1,
				pageSize:10,
				pageTotal:0,
				listData:[],
				userId:''
			}
		},
		onLoad() {
			this.userId=uni.getStorageSync('userId') || ''
			this.allReadClick()
			this.getNoReadNum()
			this.getTabList()
		},
		methods: {
			initPage(){
				this.page=1;
				this.listData=[]
			},
			// 根据tab获取数据
			getTabList(){
				let param={
					page:this.page,
					size:this.pageSize,
					// 1是找人 2是委托 3是接力 4是揭榜
					foundPersonType:this.activeTab+1
				}
				messFindList(param).then((res)=>{
					if(res.code==100000){
						this.listData=this.listData.concat(res.data.rows)
						this.pageTotal=Math.ceil(res.data.total/this.pageSize)
					}
				})
			},
			// 获取各个模块未读数量
			getNoReadNum(){
				messFindUnreadNum().then((res)=>{
					if(res.code==100000){
						this.tabArr[0].num=res.data.foundUnReadTotal
						this.tabArr[1].num=res.data.entrustUnReadTotal
						this.tabArr[2].num=res.data.relayUnReadTotal
						this.tabArr[3].num=res.data.unveiledUnReadTotal
					}
				})
			},
			// 已读
			allReadClick(){
				let param={
					foundPersonType:this.activeTab+1,
					isAll:true,
					ids:[]
				}
				messFindReadOper(param).then((res)=>{
					if(res.code==100000){
						this.getNoReadNum()
					}
				})
			},
			tabChangeSuccess(obj){
				console.log('obj',obj)
				this.activeTab=obj.activeTab
				this.initPage()
				this.getTabList()
				this.allReadClick()
			},
			// 找人详情
			toFindDetail(item){
				uni.navigateTo({
					url:'/pages/send/lookFor/lookHomepage/lookHomepage?id='+item.jumpId
				})
			},
			// 去个人主页
			toHomePage(item){
				uni.navigateTo({
					url:'/pages/mine/homePage/homePage?userId='+item.triggerId
				})
			}
		},
		onPullDownRefresh() {
			this.initPage()
			this.getTabList()
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		onReachBottom() {
			if(this.page<this.pageTotal){
				++this.page
				this.getTabList()
			}else{
				uni.showToast({
					title:'我也是有底线的',
					icon:'none'
				})
			}
		}
	}
</script>
<style lang="scss">
@import "@/static/public.scss";	
page{
	background-color:$pageBgColor;
}
</style>
<style scoped lang="scss">
.findMessage{
	.findBox{
		padding: 30rpx 30rpx 0;
		box-sizing: border-box;
	}
}
.queHeader{
	.avatar{
		width:76rpx;
		height:76rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
		position: relative;
		image{
			border-radius: 50%;
			width:100%;
			height:100%;
		}
	}
	.con{
		flex:1;
	}
	.time{
		margin-right: 10rpx;
	}
}
.findOne{
	background: #fff;
	// border-radius: 10rpx;
	padding: 30rpx;
	box-sizing: border-box;
	margin-bottom: 20rpx;
	border-radius: 20rpx;
	.operWord{
		margin: 20rpx 0 0;
	}
	.quesTitle{
		background: $pageBgColor;
		border-radius: 5rpx;
		box-sizing: border-box;
		margin:20rpx 0 0;
		padding: 0 20rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
}
</style>

